<template>
  <px-dialog v-model="visible" width="80%" @close="closeDialog">
    <div class="equip-table-wrap">
      <!-- 搜索功能 -->
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="5">
            <px-form-item label="地块">
              <px-select v-model="queryParams.facCode" placeholder="请选择地块" clearable>
                <px-option v-for="item in facCodeList" :key="item.id" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="设备名称">
              <px-input
                v-model="queryParams.value"
                placeholder="请输入名称/编码"
                maxlength="50"
                @blur="queryParams.value = $event.target.value.trim()"
              />
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="安装位置">
              <px-tree-select
                v-model="queryParams.positionCode"
                filterable
                clearable
                placeholder="请选择安装位置"
                :props="{
                  children: 'children',
                  label: 'name',
                  value: 'code'
                }"
                :data="positionCodeList"
                :render-after-expand="false"
                @focus="positionCodeFocus"
              />
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="设备状态">
              <px-select v-model="queryParams.eqpStatus" placeholder="请选择设备运行状态" clearable>
                <px-option v-for="item in eqpStatusList" :key="item.id" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>

      <!-- 表格功能 -->
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 311px)" border @selection-change="handleSelectionChange">
        <px-table-column type="selection" min-width="40" align="center" fixed="left" />
        <px-table-column type="index" label="序号" min-width="60" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <span v-if="item.eqpStatusValue">
              <!-- 故障 -->
              <span
                v-if="scope.row.eqpStatusValue === '故障'"
                style="
                  display: inline-block;
                  height: 22px;
                  padding: 0 8px;
                  line-height: 22px;
                  color: #ef4444;
                  text-align: center;
                  background: #feecec;
                  border: 1px solid #fac7c7;
                  border-radius: 4px;
                "
              >
                {{ scope.row.eqpStatusValue }}
              </span>
              <!-- 异常 -->
              <span
                v-else-if="scope.row.eqpStatusValue === '异常'"
                style="
                  display: inline-block;
                  height: 22px;
                  padding: 0 8px;
                  line-height: 22px;
                  color: #f59e0b;
                  text-align: center;
                  background: #fef5e6;
                  border: 1px solid #fef5e6;
                  border-radius: 4px;
                "
              >
                {{ scope.row.eqpStatusValue }}
              </span>
              <!-- 火警 -->
              <span
                v-else-if="scope.row.eqpStatusValue === '正常'"
                style="
                  display: inline-block;
                  height: 22px;
                  padding: 0 8px;
                  line-height: 22px;
                  color: #10b981;
                  text-align: center;
                  background: #e8f8f3;
                  border: 1px solid #b7ead9;
                  border-radius: 4px;
                "
              >
                {{ scope.row.eqpStatusValue }}
              </span>
              <!-- 监管 -->
              <span
                v-else-if="scope.row.eqpStatusValue === '监管'"
                style="
                  display: inline-block;
                  height: 22px;
                  padding: 0 8px;
                  line-height: 22px;
                  color: #3b82f6;
                  text-align: center;
                  background: #ecf5ff;
                  border: 1px solid #c6e2ff;
                  border-radius: 4px;
                "
              >
                {{ scope.row.eqpStatusValue }}
              </span>
              <!-- 正常 -->
              <span v-else-if="scope.row.eqpStatusValue === '火警'" class="status">
                <img :src="firePng" />
                <span>{{ scope.row.eqpStatusValue }}</span>
              </span>
              <span v-else> {{ scope.row.eqpStatusValue || "-" }} </span>
            </span>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="confirm()">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>
<script setup lang="ts">
import { toRefs, watch, reactive } from "vue";
import { queryToolLedger } from "@/api/erc/equip";
import { positionLedger } from "@/api/erc/equip";
import firePng from "@/assets/images/erc/fire.png";

const visible = defineModel("visible");
const emits = defineEmits(["close", "confirm"]);
const data = reactive<Record<string, any>>({
  facCodeList: [],
  positionCodeList: [],
  eqpStatusList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    systemCode: "",
    facCode: "",
    value: "",
    positionCode: "",
    eqpStatus: "",
    typeCode: ""
  },
  formValue: {
    eqpId: "",
    eqpName: "",
    facCode: "",
    facName: "",
    typeCode: "",
    positionCode: ""
  },
  treeDataPlus: "",
  typeCode: "",
  typeName: "",
  tableColumns: [
    { prop: "eqpName", label: "设备名称", minWidth: "176", showOverflowTooltip: true, fixed: "left" },
    { prop: "eqpId", label: "设备编码", minWidth: "176", showOverflowTooltip: true },
    { prop: "specification", label: "规格型号", minWidth: "180", showOverflowTooltip: true },
    { prop: "facName", label: "地块", minWidth: "120", showOverflowTooltip: true },
    { prop: "positionNameAll", label: "安装位置", minWidth: "200", showOverflowTooltip: true },
    { prop: "eqpStatusValue", label: "设备状态", minWidth: "120", showOverflowTooltip: true, eqpStatusValue: true },
    { prop: "brand", label: "品牌", minWidth: "150", showOverflowTooltip: true },
    { prop: "contactName", label: "联系人", minWidth: "150", showOverflowTooltip: true },
    { prop: "contactTel", label: "联系方式", minWidth: "150", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  selectIds: [],
  eqpIdLists: []
});

const { typeCode, facCodeList, positionCodeList, eqpStatusList, queryParams, tableColumns, tableData, total, selectIds } = toRefs(data);
watch(
  () => visible.value,
  newVal => {
    if (newVal) {
      queryTable();
    }
  }
);
const queryTable = async () => {
  const data = await queryToolLedger({ ...queryParams.value });
  // console.log(data);
  tableData.value = data?.data;
  total.value = data?.total;
  typeCode.value = queryParams.value.typeCode;
};
// 安装位置聚焦时--存放
const positionCodeFocus = async () => {
  positionCodeList.value = await positionLedger({ facCode: queryParams.value.facCode });
};
// 重置筛选条件和备件台账列表
const resetTable = async () => {
  queryParams.value.facCode = "";
  queryParams.value.value = "";
  queryParams.value.positionCode = "";
  queryParams.value.eqpStatus = "";
  queryTable();
};
/** 多选框选中数据 */
const handleSelectionChange = (val: any) => {
  selectIds.value = [];
  val.forEach((item: any) => {
    if (item.eqpId) {
      selectIds.value.push(item.eqpId);
    }
  });
};
function closeDialog() {
  visible.value = false;
}
const confirm = async () => {
  emits("confirm", selectIds.value);
};
</script>
